<template>
	<view class="wrap">
		<u-form class="form" :model="model" :rules="rules" ref="uForm">
			<u-form-item label="旧密码" prop="oldPassword" label-width="160">
				<u-input type="password" v-model="model.oldPassword" placeholder="请输入旧密码"></u-input>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword" label-width="160">
				<u-input type="password" v-model="model.newPassword" placeholder="请输入新密码"></u-input>
			</u-form-item>
			<u-form-item label="确认密码" prop="confirmNewPassword" label-width="160">
				<u-input type="password" v-model="model.confirmNewPassword" placeholder="请确认新密码"></u-input>
			</u-form-item>
			
			<u-form-item label="手机号码" prop="mobile" label-width="160">
				<u-input class="u-input" type="text" v-model="model.mobile" maxlength="11" placeholder="请输入手机号码" />
			</u-form-item>
			
			
			<u-form-item label="图片验证码" prop="validCode" label-width="160">
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<!-- <u-icon class="u-icon" size="40" name="bookmark"></u-icon> -->
					<input class="u-input" style="margin: auto;" type="text" v-model="model.validCode" maxlength="4" placeholder="图片验证码" />
					<u-image class="img-valid-code" width="300rpx" height="90rpx" :src="imgValidCodeSrc" @click="refreshImgValidCode()"></u-image>
				</view>
			</u-form-item>
			
			<u-form-item label="验证码" prop="fpValidCode" label-width="150">
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
				<input class="u-input" style="margin: auto;"  type="text" v-model="model.fpValidCode" maxlength="6" placeholder="仅3次机会" />
				<u-verification-code ref="uCode" :seconds="seconds" @change="codeChange"></u-verification-code>
				<view class="btn-valid-code" :class="{ 'btn-valid-codes': tips != '获取验证码' && tips != '重新获取' }"
					hover-class="btn-valid-code-hover" @click="getValidCode()">{{tips}}</view>
				</view>
			</u-form-item>
			
			<!-- <view class="list-call">
				<u-icon class="u-icon" size="40" name="phone"></u-icon>
			</view>
			<view class="list-call">
				<u-icon class="u-icon" size="40" name="coupon"></u-icon>
				<input class="u-input" type="text" v-model="fpValidCode" maxlength="6" placeholder="手机验证码" />
				<u-verification-code ref="uCode" :seconds="seconds" @change="codeChange"></u-verification-code>
				<view class="btn-valid-code" :class="{ 'btn-valid-codes': tips != '获取验证码' && tips != '重新获取' }"
					hover-class="btn-valid-code-hover" @click="getValidCode()">{{tips}}</view>
			</view> -->
			<!-- 
			<view class="wrap">
			<view class="list">
				<view class="list-call">
					<u-icon class="u-icon" size="40" name="bookmark"></u-icon>
					<input class="u-input" type="text" v-model="validCode" maxlength="4" placeholder="图片验证码" />
					<u-image class="img-valid-code" width="300rpx" height="90rpx" :src="imgValidCodeSrc" @click="refreshImgValidCode()"></u-image>
				</view>
			
			</view>
			</view> -->
		</u-form>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">提交</u-button>
			<!-- <u-button class="btn" type="default" @click="cancel">关闭</u-button> -->
		</view>
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 */
import base64 from '@/common/base64.js';
export default {
	data() {
		return {
			// validCode: '',
			// fpValidCode: '',
			userType: 'member',
			showPassword: false,
			imgValidCodeSrc: null,
			tips: '获取验证码',
			seconds: 60,
			model: {
				oldPassword: '',
				newPassword: '',
				confirmNewPassword: '',
				mobile:''
				
			},
			rules: {
				oldPassword: [
					{
						required: true,
						message: '请输入旧密码',
						trigger: ['change','blur'],
					}
				],
				newPassword: [
					{
						required: true,
						message: '请输入新密码',
						trigger: ['change','blur'],
					},
					{
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						message: '需同时含有字母和数字，长度在6-12之间',
						trigger: ['change','blur'],
					}
				],
				confirmNewPassword: [
					{
						required: true,
						message: '请重新输入密码',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							return value === this.model.newPassword;
						},
						message: '两次输入的密码不相等',
						trigger: ['change','blur'],
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change','blur'],
					},
					{
						pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
						message: '请输入正确的手机号码',
						trigger: ['change','blur'],
					}
				],
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {
		this.refreshImgValidCode();
	},
	methods: {
		refreshImgValidCode(e) {
			if (this.vuex_token == '') {
				this.$u.api.index().then(res => {
					this.imgValidCodeSrc = this.vuex_config.baseUrl + '/validCode?__sid='
						+ res.sessionid + '&t=' + new Date().getTime();
				});
			} else {
				this.imgValidCodeSrc = this.vuex_config.baseUrl + '/validCode?__sid='
						+ this.vuex_token + '&t=' + new Date().getTime();
			}
			this.model.validCode = '';
		},
		codeChange(text) {
			this.tips = text;
		},
		formValid() {
			if (this.model.oldPassword.length == 0) {
				this.$u.toast('请输入旧密码');
				return false;
			}
			if (this.model.newPassword.length == 0) {
				this.$u.toast('请输入新密码');
				return false;
			}
			if (this.model.confirmNewPassword.length == 0) {
				this.$u.toast('请输入确认密码');
				return false;
			}
			if (this.model.mobile.length == 0) {
				this.$u.toast('请输入手机号码');
				return false;
			}
			// if (this.model.validCode.length == 0) {
			// 	this.$u.toast('请输入图片验证码');
			// 	return false;
			// }
			return true;
		},
		getValidCode() {
			if (!this.formValid()) {
				return;
			}
			if (this.$refs.uCode.canGetCode) {
				this.$u.api.validCode({
					validCode: this.model.validCode
				})
				.then(res => {
					if (res !== 'true') {
						this.$u.toast('图片验证码错误');
						return;
					}
					this.$u.api.getModiyPwdValidCode({
						// loginCode: this.loginCode,
						// userName: this.userName,
						// email: this.email,
						mobile: this.model.mobile,
						userType: this.userType,
						validCode: this.model.validCode,
						validType: 'mobile'
					})
					.then(res => {
						this.$u.toast(res.message, 3000);
						if (res.result == 'false') {
							this.refreshImgValidCode();
						}
					});
					this.$refs.uCode.start();
				});
			}
		},
		submit() {
			
			if (!this.formValid()) {
				return;
			}
			if (!this.model.fpValidCode) {
				this.$u.toast('请输入手机验证码');
				return false;
			}
			
			
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api.user.infoSavePwd({
						oldPassword: base64.btoa(this.model.oldPassword),
						newPassword: base64.btoa(this.model.newPassword),
						confirmNewPassword: base64.btoa(this.model.confirmNewPassword),
						mobile: this.model.mobile,
						fpValidCode: this.model.fpValidCode,
					}).then(res => {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function () {
								if (res.result == 'true') {
									uni.navigateBack();
								}
							}
						});
					});
				} else {
					this.$u.toast('您填写的信息有误，请根据提示修正。');
				}
			});
		},
		cancel() {
			uni.navigateBack();
		}
	}
};
</script>
<style lang="scss">
@import '../login/index.scss';
</style>
